<template>
  <div class="homepage">
    <van-swipe
      style="height: 100%"
      :loop="false"
      vertical
      :initial-swipe="this.num"
      @change="onChange"
    >
      <van-swipe-item
        ><page1 :indicator="this.indicator"></page1
      ></van-swipe-item>
      <van-swipe-item
        ><page2 :indicator2="this.indicator2"></page2
      ></van-swipe-item>
      <van-swipe-item
        ><page3 :indicator3="this.indicator3"></page3
      ></van-swipe-item>
      <van-swipe-item
        ><page4 :indicator4="this.indicator4"></page4
      ></van-swipe-item>
      <van-swipe-item><page5></page5></van-swipe-item>
      <template #indicator>
        <div class="custom-indicator" @click="goto" v-if="!isfal">
          <img src="../assets/icon.png" alt="" />
        </div>
        <template v-if="isfal">
          <div class="footer">
            本计划由《太平福禄20两全保险》、《太平附加福禄20提前给付重大疾病保险》、《太平超e保2021医疗保险》和《太平医安心医疗保险》构成，由太平人寿保险有限公司承保。本资料仅供了解该产品计划使用，具体应以条款与保险合同为准。
          </div>
        </template>
      </template>
    </van-swipe>
    <audio :src="srcContent" autoplay></audio>
  </div>
</template>
<script>
import page1 from "./Page1";
import page2 from "./page2";
import page3 from "./page3";
import page4 from "./page4";
import page5 from "./page5";
export default {
  components: {
    page1,
    page2,
    page3,
    page4,
    page5,
  },
  data() {
    return {
      num: 0,
      srcContent:
        "https://znpltest.ft.cntaiping.com/voicefront/stor-lang-test-2021/1169653332.wav",
      indicator: false,
      indicator2: false,
      indicator3: false,
      indicator4: false,
    };
  },
  methods: {
    goto() {
      this.num++;
      switch (this.num) {
        case 1:
          this.srcContent =
            "https://znpltest.ft.cntaiping.com/voicefront/stor-lang-test-2021/-1366870004.wav";
          break;
        case 2:
          this.srcContent =
            "https://znpltest.ft.cntaiping.com/voicefront/stor-lang-test-2021/1169653332.wav";
          break;
        case 3:
          this.srcContent =
            "https://znpltest.ft.cntaiping.com/voicefront/stor-lang-test-2021/-1366870004.wav";
          break;
      }
    },
    onChange(index) {
      // 通过vant中轮播提供的事件去监听动画
      console.log("监听的值为" + index);
      switch (index) {
        case 0:
          this.indicator = true;
          break;
        case 1:
          this.indicator2 = true;
          break;
        case 2:
          this.indicator3 = true;
          break;
        case 3:
          this.indicator4 = true;
          break;
      }
    },
  },
  computed: {
    isfal() {
      return this.num == 4;
    },
  },
};
</script>
<style scoped>
.homepage {
  height: 100%;
}
.custom-indicator {
  position: absolute;
  left: 45%;
  bottom: 20px;
  -webkit-animation: opener 0.5s ease-in-out alternate infinite;
  animation: opener 0.5s ease-in-out alternate infinite;
  cursor: pointer;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s ease-in-out, transform 0.5s ease-in-out 0.2s;
  transition: opacity 0.2s ease-in-out, transform 0.5s ease-in-out 0.2s;
}
.footer {
  width: 95%;
  position: fixed;
  bottom: 30px;
  left: 0;
  color: #999;
  font-size: 12px;
  z-index: 999;
  margin-left: 10px;
}
@-webkit-keyframes opener {
  100% {
    bottom: 0.3rem;
  }
}
@keyframes opener {
  100% {
    bottom: 0.3rem;
  }
}
</style>